<template>
  <div>
    <van-cell-group>
      <van-cell >
        <van-col span="12"><van-icon name="location-o" />收货人:  {{buyName}}</van-col>
        <van-col span="8">电话: {{tel}}</van-col>
        <van-col span="21" style="padding-left: 43px;font-size: 13px">地址: {{address}}</van-col>
      </van-cell>
    </van-cell-group>

    <van-card
      :num="num"
      :price="price"
      :desc="specs"
      :title="phoneName"
      :thumb="icon"
    />
    <van-cell-group>
      <van-cell >
        <van-col span="12"><van-icon name="location-o" />配送方式:</van-col>
        <van-col span="8">快递</van-col>
      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell >
        <van-col span="12"><van-icon name="location-o" />合计:</van-col>
        <van-col span="8">{{price}}</van-col>
      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell >
        <van-col span="12"><van-icon name="location-o" />运费</van-col>
        <van-col span="8">{{freight}}</van-col>
      </van-cell>
    </van-cell-group>

    <van-submit-bar
        :price=1000
        button-text="确认付款"
        @submit="onSubmit"
    />
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "Detail",
  data() {
    return {
      orderId: '126457991231345645972',
      buyName: '小明',
      phoneName: 'Honor BA',
      payStatus: 0,
      freight: 10,
      tel: '123456',
      address: '云南省临沧市撒旦法放假了',
      num: '1',
      price: '2800.0',
      specs: '20GB',
      icon: 'https://img01.yzcdn.cn/vant/ipad.jpeg'
    }
  },
  created() {
    this.buyName = this.$route.query.username
    this.tel = this.$route.query.tel
    this.address = this.$route.query.address
    this.icon = this.$route.query.url
    this.price = this.$route.query.score
  },
  methods: {
   onSubmit() {
     if (this.$route.query.flag === '1'){
       let instance = Toast("兑换成功");
       setTimeout(()=>{
         instance.close();
         this.$router.push({path: '/info?orderId='+this.orderId + '&amount='
               + (this.price * this.num + this.freight), query:{
             buyName: this.buyName,
             tel: this.tel,
             address: this.address,
             url: this.icon,
             price: this.price*1+this.freight*1
           }
         })
       },1000)
     }else {
       this.axios.post('http://localhost:10006/api/ali-pay/trade/page/pay/4').then(response => {
         console.log(response.data.data)
         document.write(response.data.data.formStr)
         // this.$router.push('/success?orderId='+this.orderId+'&amount='+(this.price*this.num+this.freight))
       })
     }
        /*let instance = Toast("支付成功");
        setTimeout(()=>{
          instance.close();
          this.$router.push({path: '/info?orderId='+this.orderId + '&amount='
                + (this.price * this.num + this.freight), query:{
            buyName: this.buyName,
              tel: this.tel,
              address: this.address,
              url: this.icon,
              price: this.price*1+this.freight*1
            }
          })
        },1000)*/

    }
  }
}
</script>

<style scoped>

</style>